import React, { Component } from 'react';
import { findCinemas } from '@/api/MaiZuo';

export default class Cinema extends Component {
  state = {
    myText: '',
    cinemaList: [],
  };

  constructor() {
    super();

    findCinemas().then((res) => {
      // console.log(res);

      this.setState({
        cinemaList: res.cinemas,
      });
    });
  }

  render() {
    return (
      <div>
        <div className='search'>
          <input
            type='text'
            placeholder='请输入影院名称'
            value={this.state.myText}
            onChange={(e) => this.setState({ myText: e.target.value })}
          />
        </div>
        <ul className='cinemaList'>
          {this.getCinemaList().map((item) => {
            return (
              <li key={item.cinemaId}>
                <div className='cinemaName'>{item.name}</div>
                <div className='cinemaAddress'>{item.address}</div>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

  /**
   * 过滤 电影院
   * @returns 过滤后的电影院数组
   */
  getCinemaList = () => {
    return this.state.cinemaList.filter(
      (item) =>
        item.name.toUpperCase().includes(this.state.myText.toUpperCase()) ||
        item.address.toUpperCase().includes(this.state.myText.toUpperCase())
    );
  };
}
